<template>
  <div class="pay-page" v-loading="loading">
    <div class="pay-header">
      <el-button @click="goBack">返回订单</el-button>
      <h1>订单支付</h1>
    </div>
    <el-card class="pay-card" v-if="order">
      <div class="pay-info">
        <div class="pay-row">
          <span>订单号：</span><span>{{ order.id }}</span>
        </div>
        <div class="pay-row">
          <span>收货人：</span><span>{{ order.shippingAddress?.name }}</span>
        </div>
        <div class="pay-row">
          <span>收货电话：</span><span>{{ order.shippingAddress?.phone }}</span>
        </div>
        <div class="pay-row">
          <span>收货地址：</span><span>{{ order.shippingAddress?.address }}</span>
        </div>
        <div class="pay-row">
          <span>商品总额：</span><span>¥{{ (order.total - order.shipping).toFixed(2) }}</span>
        </div>
        <div class="pay-row">
          <span>运费：</span><span>¥{{ order.shipping.toFixed(2) }}</span>
        </div>
        <div class="pay-row pay-amount">
          <span>应付金额：</span><span class="amount">¥{{ order.total.toFixed(2) }}</span>
        </div>
      </div>
      <div class="pay-qrcode-section">
        <img :src="qrCodeUrl" alt="支付二维码" class="pay-qrcode" />
        <p class="pay-tip">请使用{{ order.paymentMethod === 'alipay' ? '支付宝' : '微信' }}扫码支付</p>
        <div class="pay-actions">
          <el-button type="success" @click="payOrder" :loading="paying">我已支付</el-button>
          <el-button @click="cancelOrder" :disabled="paying">取消支付</el-button>
        </div>
      </div>
    </el-card>
    <el-empty v-else description="未找到订单信息" />
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from 'axios'
import { ElMessage } from 'element-plus'

export default {
  name: 'Pay',
  setup() {
    const route = useRoute()
    const router = useRouter()
    const order = ref(null)
    const loading = ref(true)
    const paying = ref(false)
    const qrCodeUrl = ref('')

    // 加载订单信息
    const fetchOrder = async () => {
      loading.value = true
      try {
        const orderId = route.params.orderId
        const res = await axios.get(`http://localhost:3000/orders/${orderId}`)
        order.value = res.data
        // 设置二维码
        qrCodeUrl.value = order.value.paymentMethod === 'alipay'
          ? 'https://ts1.tc.mm.bing.net/th/id/R-C.1bb0efa80e98c922e3b80cc5ef080228?rik=LZdzuS9lCjIjIg&riu=http%3a%2f%2fcache.mobanma.com%2fUploads%2fpro%2fcover%2f2018%2f11%2f26%2f201811260906538771iOZcNQ.png&ehk=ip8pLqZHgSiJfEbCO9MmZrXSRdnZVhbRPmOkGwPS56c%3d&risl=&pid=ImgRaw&r=0'
          : 'https://ts1.tc.mm.bing.net/th/id/R-C.bdd2f9ebd306a6b1c49a628c141038a6?rik=%2blTCn3fLIQ6UYg&riu=http%3a%2f%2fcache.mobanma.com%2fUploads%2fpro%2fcover%2f2017%2f07%2f18%2f201707181349189491QyuCXB.thumb.jpg&ehk=sYKsrYBprkjHac5%2bul11Brrs3mYilIc7eK9f7KsliIg%3d&risl=&pid=ImgRaw&r=0'
      } catch (e) {
        order.value = null
      } finally {
        loading.value = false
      }
    }

    onMounted(() => {
      fetchOrder()
    })

    // 支付订单
    const payOrder = async () => {
      if (!order.value) return
      paying.value = true
      try {
        await axios.patch(`http://localhost:3000/orders/${order.value.id}`, { status: 'paid' })
        ElMessage.success('支付成功，订单已完成')
        router.push({ path: '/medicines', query: { tab: 'orders' } })
      } catch (e) {
        ElMessage.error('支付失败，请重试')
      } finally {
        paying.value = false
      }
    }

    // 取消支付
    const cancelOrder = () => {
      ElMessage.info('订单已取消支付，可在我的订单中继续支付')
      router.push({ path: '/medicines', query: { tab: 'orders' } })
    }

    const goBack = () => {
      router.push({ path: '/medicines', query: { tab: 'orders' } })
    }

    return {
      order,
      loading,
      paying,
      qrCodeUrl,
      payOrder,
      cancelOrder,
      goBack
    }
  }
}
</script>

<style scoped>
.pay-page {
  max-width: 600px;
  margin: 40px auto;
  padding: 20px;
}
.pay-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}
.pay-header h1 {
  font-size: 24px;
  color: #2c3e50;
  margin: 0;
}
.pay-card {
  padding: 30px 20px;
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(64,158,255,0.10);
}
.pay-info {
  margin-bottom: 30px;
}
.pay-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  color: #606266;
  font-size: 15px;
}
.pay-row.pay-amount {
  font-size: 18px;
  color: #303133;
  font-weight: 600;
}
.pay-row .amount {
  color: #f56c6c;
  font-size: 20px;
  font-weight: bold;
}
.pay-qrcode-section {
  text-align: center;
}
.pay-qrcode {
  width: 200px;
  height: 200px;
  margin-bottom: 15px;
}
.pay-tip {
  color: #606266;
  margin-bottom: 10px;
}
.pay-actions {
  margin-top: 18px;
  display: flex;
  justify-content: center;
  gap: 18px;
}
</style> 